@import "vwstyle";
body,html{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
header{
    height: vw(90);
    box-sizing: border-box;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    article{
        width: vw(560);
        height: vw(58);
        background: #ebebeb;
        text-align: center;
        margin: 0 vw(32) 0 vw(20);
        color: #999;
        line-height: vw(58);
        border-radius: 10px;
    }
    a{
        display: flex;
        align-items: center;
        i{
            display: inline-block;
            vertical-align: middle;
            margin-right: vw(10);
        }
        font-size: vw(30);
        color: #0084ff;
        padding-right: vw(30);
    }
}
nav{
    height: vw(71);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dbdbdb;
    .active{
        border-bottom: 2px solid #444444;
        a{
            color: #1a1a1a;
        }
    }
    li{
        line-height: vw(71);
        height: 100%;
        flex: 1;
        a{
            display: block;
            height: 100%;
            text-align: center;
            color: #999;
            font-weight: bold;
        }
    }
}
main{
    flex: 1;
    overflow: auto;
    .section1_content{
        height: vw(310);
        border-bottom: 16px solid #ebebeb;
        text-align: center;
        p{
            padding-top: vw(33);
            position: relative;
            height: vw(78);
            
            // display: flex;
            // justify-content: center;
            img{
                display: inline-block;
                width: vw(68);
                height: vw(68);
                border: 5px solid #fff;
                border-radius: 50%;
                position: absolute;
                transform: translateX(-50%);
                &:nth-child(1){
                    margin-left: 0;
                    left: 38%;
                }
                &:nth-child(2){
                    margin-left: 0;
                    z-index: 2;
                    left: 46%;
                }
                &:nth-child(3){
                    margin-left: 0;
                    z-index: 3;
                    left: 54%;
                }
                &:nth-child(4){
                    margin-left: 0;
                    z-index: 4;
                    left: 62%;
                }
            }
        }
        span{
            display: block;
            text-align: center;
            padding-top: vw(20);
            padding-bottom: vw(34);
            color: #1a1a1a;
            font-weight: bold;
            font-size: vw(34);
        }
        a{
            font-size: vw(28);
            color: #fff;
            padding: vw(22) vw(56);
            background: #0084ff;
            border-radius: 30px;
        }
    }
    .section2_content{
        h3{
            padding: vw(30) 0 vw(10) vw(20);
            position: relative;
            i{
                position: absolute;
                right: vw(22);
                top: 50%;
                transform: translateY(-50%);
            }
        }
        figure{
            display: flex;
            &:last-child article{
                border-bottom:0;
            }
            figcaption{
                margin-left: vw(24);
                margin-right: vw(8);
                margin-top: vw(24);
                img{
                    width: vw(80);
                    height: vw(80);
                    border-radius: 50%;
                }
            }
            article{
                flex: 1;
                margin-top: vw(24);
                padding-left: vw(12);
                padding-bottom: vw(24);
                border-bottom: 1px solid #d3d3d3;
                position: relative;
                h4{
                    font-size: vw(30);
                    color: #1a1a1a;
                }
                p{
                    font-size: vw(26);
                    color: #444444;
                }
                span{
                    color: #999999;
                    font-size: vw(22);
                }
                a{
                    position: absolute;
                    right: vw(24);
                    top: 50%;
                    transform: translateY(-65%);
                    background: #f6f6f6;
                    color: #0084ff;
                    font-weight: bold;
                    font-size: vw(26);
                    display: inline-block;
                    width: vw(144);
                    height: vw(64);
                    text-align: center;
                    line-height: vw(64);
                    border-radius: vw(10);
                    i{
                        display: inline-block;
                        vertical-align: middle;
                        margin-top: vw(-4);
                    }
                }
            }
        }
    }
}
footer{
    height: vw(96);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #d3d3d3;
    // box-sizing: border-box;
    // border-top: 1px solid #666;
    p{
        a{
        
            i{
                font-size: vw(40)  !important;
            }
            color:#999;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .active{
            color: #0084ff;
        }
    }
}